<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        * {margin: 0; padding: 0; list-style: none;}
        .home-wrapper { width: 1118px; margin: 0 auto; padding-bottom: 20px; padding-top: 20px;}
        .home-wrapper .rows {overflow: hidden;}
        .home-wrapper .line {height: 1px; background-color: #ddd;}

        .home-wrapper .visit-count {padding-top: 30px; float: left; width: 250px; text-align: center; font-size: 14px; color: #666;}
        .home-wrapper .visit-count .title {margin-bottom: 16px; font-size: 18px; color: #333; font-weight: bold;}
        .home-wrapper .visit-count .date {margin-bottom: 58px;}
        .home-wrapper .visit-count .count {font-size: 36px; color: #23A7FA; font-weight: bold;}


        .home-wrapper .echar {margin-bottom: 60px; float: left; width: calc(100% - 250px); height: 220px;}

        .home-wrapper .item-wrap {margin-right: 30px; float: left; width: 300px; padding-top: 50px; height: 320px; text-align: center; font-size: 36px; color: #2B686A; background: #69ABAC;}
        .home-wrapper .item-wrap.item-wrap2 {background: #CECA9C; color: #A3A06C;}
        .home-wrapper .item-wrap .count {padding-top: 10px; font-weight: bold;}
        .home-wrapper .item-wrap .label {font-size: 16px; padding-top: 10px;}

        .home-wrapper .rectangle-item {width: 456px; height: 145px; background: #9CCA9B; color: #5A855B; font-size: 36px; font-weight: bold; }
        .home-wrapper .rectangle-item .img{margin-left: 72px; margin-top: 42px;}
        .home-wrapper .rectangle-item .count{position: relative; top: 26px; left: 20px;}
        .home-wrapper .rectangle-item .label{font-size: 16px;position: relative; top: 22px; left: 20px;}
    </style>
</head>
<body>
<div class="home-wrapper">
    <div class="rows">
        <div class="visit-count">
            <p class="title">平台访问次数 </p>
            <p class="date" id="date">2020年2月18日访问总量 </p>
            <div>
                <span class="count" id="visitCount"></span>
                <span>人次</span>
            </div>
        </div>

        <div class="echar" id="echar"></div>
    </div>
    <div class="line"></div>
    <div class="rows" style="padding-top: 30px;">
        <div class="item-wrap">
            <img src="img/home/2.png" alt="">
            <p class="count" id="companyCount"></p>
            <p class="label">当前企业数</p>
        </div>
        <div class="item-wrap item-wrap2">
            <img src="img/home/1.png" alt="">
            <p class="count" id="postCount"></p>
            <p class="label">提供岗位数</p>
        </div>

        <div style="float: left;">
            <div class="rectangle-item" style="margin-bottom: 30px;">
                <img src="img/home/3.png" alt="" class="img">
                <span class="count" id="jyCount"></span>
                <span class="label">已就业人数</span>
            </div>
            <div class="rectangle-item">
                <img src="img/home/4.png" alt="" class="img">
                <span class="count" id="regCount"></span>
                <span class="label">已注册人数</span>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/openTab.js"></script>
<script src="js/echarts.min.js"></script>
<script th:inline="javascript"> var ctx = [[@{/}]] ; </script>
<script>
    // 访问次数 visitCount
    var oVisitCount = document.getElementById('visitCount');
    // 日期date
    var oDate = document.getElementById('date');
    // 企业数 companyCount
    var oCompanyCount = document.getElementById('companyCount');
    // 岗位数 postCount
    var oPostCount = document.getElementById('postCount');
    // 就业数 jyCount
    var oJyCount = document.getElementById('jyCount');
    // 注册数 regCount
    var oRegCount = document.getElementById('regCount');

    var echartsOption = {
        color: ['#23A7FA'],
        tooltip: {
            show: true
        },
        grid: {
            top: 10,
            right: 10,
            bottom:40
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                rotate: -40
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            },
            splitLine: {
                show: true
            },
            data: []
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },
        series: [
            {
                data: [],
                type: 'line'
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('echar'));
    myChart.setOption(echartsOption);
    getData();
    function getData () {
        $.ajax({
            type: "GET",
            url: ctx + "report/mainReport",
            success: function (r) {
                if (r.code == 0) {
                    var data = r.data;
                    var hourVisit = data.visit.hourVisit;

                    echartsOption.xAxis.data = [];
                    echartsOption.series[0].data = [];
                    for (var name in hourVisit) {
                        echartsOption.xAxis.data.push(toDou(parseInt(name)) + ':00');
                        echartsOption.series[0].data.push(hourVisit[name]);
                    }
                    myChart.setOption(echartsOption);

                    oVisitCount.innerHTML = data.visit.total;
                    oDate.innerHTML = data.visit.describe;


                    oCompanyCount.innerHTML = data.companyCount;
                    oPostCount.innerHTML = data.postCount;

                    oJyCount.innerHTML = 0; // TODO 没有就业总数
                    oRegCount.innerHTML = data.userCount;
                } else {
                    layer.msg(r.msg);
                }
            },
        });
    }
    function toDou (n) {
        return n < 10 ? '0' + n : n;
    }
</script>
</body>
</html>